iT邦幫忙

2026 iThome 鐵人賽
DAY 21
0
自我挑戰組

Laravel 讀碼源系列 第 21 篇

解釋 鋼琴留言版的前端 帶出內容程式碼

18th鐵人賽
66 瀏覽

  • 分享至 

  • xImage
    •  

鋼琴留言版
https://laihao.vaserver.com/gbook

可以實際測試
也歡迎大家一起來學習喔
https://www.pressplay.cc/project/9D489B43D08BD198FDEB03ECDEFAC161/about

資料庫-這裡只有單一一個

MVC架構-
MODEL
前端
後端
解釋 鋼琴留言版的前端 帶出內容程式碼

一、HTML 基本結構

<!DOCTYPE html>
<html lang="zh-Hant-TW">

宣告這是一份 HTML5 文件，並指定頁面語言為：

繁體中文，台灣

這有助於瀏覽器、搜尋引擎及輔助工具正確理解頁面語言。

<head>

head 放置網頁設定資料，不會直接顯示在主要頁面內容中。

字元編碼

<meta charset="UTF-8">

使用 UTF-8 字元編碼，支援：

  • 繁體中文。
  • 日文。
  • 英文。
  • Emoji，例如 🎹、✨。

行動裝置適應

<meta name="viewport"
      content="width=device-width, initial-scale=1.0">

讓頁面在手機或平板上按照裝置寬度顯示，避免手機看到縮小版的桌面網頁。

網頁標題

<title>鋼琴課程許願板</title>

設定瀏覽器分頁標題。

二、CSS 樣式

<style>

這裡使用內嵌 CSS，直接寫在 Blade 頁面內。

body

body {
    font-family: 'Microsoft JhengHei', sans-serif;
    background: #f9f3ff;
}

設定整個頁面的樣式：

  • 優先使用微軟正黑體。
  • 如果系統沒有，使用瀏覽器預設的無襯線字體。
  • 背景使用淡紫色。
#f9f3ff

是十六進位色碼，代表很淡的紫色。

標題 h1

h1 {
    text-align: center;
    color: #6a0dad;
    margin-top: 30px;
}

設定主標題：

  • 文字置中。
  • 使用紫色。
  • 上方保留 30px 空間。

副標題

.subtitle {
    text-align: center;
    color: #888;
    margin-bottom: 20px;
}

套用到：

<p class="subtitle">

效果是：

  • 文字置中。
  • 使用灰色。
  • 下方保留 20px 空間。

新增按鈕

.btn {
    display: block;
    width: 150px;
    margin: 0 auto 20px;
    background: #6a0dad;
    color: white;
    text-align: center;
    padding: 10px;
    border-radius: 25px;
    text-decoration: none;
}

這個樣式會套用到新增許願的連結。

display: block

讓連結成為區塊元素，便於設定寬度和置中。

width: 150px

設定按鈕寬度為 150px。

margin: 0 auto 20px

表示：

上方 0
左右 auto，自動置中
下方 20px

background

設定紫色背景。

color: white

設定文字為白色。

padding: 10px

讓文字周圍有 10px 內距，使按鈕更容易點擊。

border-radius: 25px

將按鈕四角變成圓角，形成膠囊形按鈕。

text-decoration: none

移除超連結預設的底線。

滑鼠移入效果

.btn:hover {
    background: #530a9e;
}

當滑鼠移到按鈕上方時，背景會變成較深的紫色。

成功訊息

.success {
    text-align: center;
    color: green;
}

將成功訊息置中並顯示為綠色。

表格

table {
    width: 90%;
    margin: 0 auto;
    border-collapse: collapse;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

width: 90%

表格寬度為瀏覽器視窗的 90%。

margin: 0 auto

讓表格水平置中。

border-collapse: collapse

將相鄰儲存格的邊框合併，使表格線條較整齊。border-collapse 用來控制表格儲存格邊框是合併還是分開顯示。 developer.mozilla

background: white

表格使用白色背景。

border-radius: 10px

表格四角使用圓角。

overflow: hidden

將超出表格圓角範圍的內容裁切掉，讓表頭背景也能呈現圓角效果。

box-shadow

box-shadow: 0 4px 15px rgba(0,0,0,0.1);

設定淡淡的陰影：

水平偏移：0
垂直偏移：4px
模糊：15px
黑色透明度：10%

表頭

th {
    background: #6a0dad;
    color: white;
    padding: 12px;
}

設定表格標題列：

  • 紫色背景。
  • 白色文字。
  • 儲存格內距 12px。

表格內容

td {
    padding: 12px;
    border-bottom: 1px solid #eee;
    text-align: center;
}

設定一般資料儲存格：

  • 內距 12px。
  • 下方加入淡灰色分隔線。
  • 文字置中。

滑鼠移入資料列

tr:hover {
    background: #f3e8ff;
}

當滑鼠移到某一列時，該列會變成淡紫色，方便使用者辨識目前所在的資料列。

三、頁面標題

<h1>🎹 鋼琴課程許願板</h1>

顯示頁面的主標題，前面的 🎹 是鋼琴 Emoji。

<p class="subtitle">
    歡迎許下你想學的鋼琴課程願望！
</p>

顯示副標題，並套用前面定義的 .subtitle 樣式。

四、新增許願按鈕

<a href="{{ route('gbook.create') }}" class="btn">
    ✨ 新增許願
</a>

這是一個超連結，會前往名稱為：

gbook.create

的 Laravel 路由。

{{ route('gbook.create') }}

是 Blade 語法，會呼叫 Laravel 的 route() helper，依照路由名稱產生正確網址。

例如，如果路由設定是：

Route::get('/gbook/create', [GbookController::class, 'create'])
    ->name('gbook.create');

產生的連結可能是：

/gbook/create

因此使用者點選「新增許願」後，會進入：

GbookController::create()

顯示新增表單。

五、顯示成功訊息

@if(session('success'))
    <p class="success">{{ session('success') }}</p>
@endif

這是 Blade 的條件判斷。

session('success')

讀取 Session 中名稱為 success 的資料。

前面的 Controller 有：

return redirect()
    ->route('gbook.index')
    ->with('success', '留言新增成功！');

因此新增成功後，這裡會顯示：

留言新增成功！

@if

如果 Session 中有 success，就顯示：

<p class="success">留言新增成功！</p>

如果沒有，就不顯示任何內容。

{{ session('success') }}

將成功訊息輸出到 HTML。

Blade 的 {{ }} 預設會進行 HTML escaping，可以避免使用者輸入內容直接被當成 HTML 或 JavaScript 執行，這對顯示使用者留言很重要。 laravel

六、表格標題

<table>
    <tr>
        <th>編號</th>
        <th>許願人</th>
        <th>類型</th>
        <th>課程標題</th>
        <th>許願內容</th>
        <th>日期</th>
    </tr>

建立表格，第一列是標題列。

各欄位對應資料庫欄位：

表格欄位 資料庫欄位
編號 gid
許願人 gbook_poser
類型 gbook_kind
課程標題 gbook_title
許願內容 gbook_msg
日期 gbook_date

七、使用 @foreach 顯示留言

@foreach($gbooks as $gbook)
<tr>
    ...
</tr>
@endforeach

這段會逐筆走訪 Controller 傳過來的 $gbooks。

Controller 中有：

$gbooks = Gbook::all();

return view('gbook.index', ['gbooks' => $gbooks]);

所以 Blade 可以取得：

$gbooks

@foreach 每執行一次，就會把一筆留言放入：

$gbook

如果資料表有 29 筆資料，就會產生 29 個 <tr> 表格資料列。

八、顯示每筆資料

編號

<td>{{ $gbook->gid }}</td>

顯示留言的主鍵：

gid

例如：

1
2
3

發表人

<td>{{ $gbook->gbook_poser }}</td>

顯示：

學生

類型

<td>{{ $gbook->gbook_kind }}</td>

顯示例如：

初級

課程標題

<td>{{ $gbook->gbook_title }}</td>

顯示例如：

許願
兒歌
歐美歌

許願內容

<td>{{ $gbook->gbook_msg }}</td>

顯示例如：

德布西 月光
綠袖子
小蜜蜂的兒歌

日期

<td>{{ $gbook->gbook_date }}</td>

顯示資料庫中的 gbook_date。

例如：

2026-02-20 14:18:38

因為前面的 Model 設定：

public $timestamps = false;

Laravel 不會自動處理 created_at 和 updated_at；這裡直接讀取的是你自訂的 gbook_date 欄位。

九、整個資料流

這個頁面的運作流程如下：

使用者開啟 /gbook
        ↓
Route 呼叫 GbookController@index
        ↓
Gbook::all() 查詢 gbook 資料表
        ↓
Controller 將 $gbooks 傳給 gbook.index
        ↓
Blade 使用 @foreach 逐筆產生表格
        ↓
瀏覽器顯示留言清單

新增留言後則是：

使用者提交表單
        ↓
GbookController@store
        ↓
驗證並新增資料
        ↓
重新導向 gbook.index
        ↓
顯示 success 訊息

上一篇
鋼琴留言版的前端 程式碼
下一篇
鋼琴留言版的新增的 前端 程式碼
系列文
Laravel 讀碼源 共 22 篇
  1. 18
    鋼琴留言版的MODEL
  2. 19
    鋼琴留言版的後端 程式碼
  3. 20
    鋼琴留言版的前端 程式碼
  4. 21
    解釋 鋼琴留言版的前端 帶出內容程式碼
  5. 22
    鋼琴留言版的新增的 前端 程式碼
完整目錄
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
419 組
團體組數
16 組
累計文章數
4279 篇
最後報名日
9/15
iT+看影片追技術 看影片追技術 看更多
熱門tag
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 18th鐵人賽 python 2017鐵人賽 windows php c# linux windows server css
熱門問題
熱門回答
熱門文章
IT邦幫忙